<template>
	<view class="share-page">
		<u-overlay :show="shareShow" opacity="0.8">
			<view class="share-main" @click="closeShare">
				<view class="share-main-box" @touchmove.stop.prevent catchtouchmove="true">
					<view class="share-img" v-if="qrCodeShow">
						<!-- <image class="_img" src="../../static/img/share-big.png" mode=""></image> -->
						<image class="_img" :src="qrCode" mode=""></image>
						<!-- <view class="_qr"></view> -->
					</view>
					<view class="share-img" v-else>
						<!-- <canvas style="width: 625rpx;height: 916rpx;margin:20% auto 0;" canvas-id="myCanvas"></canvas> -->
						<canvas style="width: 510rpx;height: 700rpx;margin:0% auto 0;" canvas-id="myCanvas"></canvas>
					</view>
					<!-- 保存图片的点击事件@click="saveImg" -->
					<view class="share-save" v-if="isImgBtn"><text>长按图片保存</text></view>
					<view class="share-save" v-if="!isImgBtn" @click="download"><text>点击下载</text></view>
					<view class="share-copy" @click="copyText()"><text>复制链接</text></view>
				</view>
				<!-- <canvas style="width: 625rpx;height: 916.66rpx;margin:20% auto 0;" canvas-id="myCanvas"></canvas> -->
			</view>
		</u-overlay>
		<!-- <vue-qr class="qrCode-img" ref="imgCode" style="display: none;" :text="config.url"  :logoSrc="config.logo" :logoScale="0.2" :size="200" :margin="10" colorDark="#000000" colorLight="#fff"></vue-qr> -->
		<image ref="releaseCodeBg" style="display: none;" id="bgImg" src="../../static/img/share-big.png" mode=""></image>
	</view>
</template>

<script>
	// #ifdef H5
	import vueQr from 'vue-qr'
	// #endif
	import uploadImage from '@/common/ossutil/uploadFile.js';
	import FileSaver from 'file-saver' 
	export default {
		name:"share-page",
		data() {
			return {
				shareShow:true,
				qrCode:'',
				config: {
					url: '', // 扫码访问的链接地址
					logo: '' // 随便一张图片的地址也行
				},
				bgSrc:require('@/static/img/share-big.png'),
				qrCodeShow:false,
				isImgBtn:true,
			};
		},
		props:{
			shareUrl:{
				type:String,
				default:''
			},
			copyUrl:{
				type:String,
				default:''
			}
		},
		components:{
			// #ifdef H5
			vueQr
			// #endif
		},
		mounted() {
			if (this.shareUrl) {
				// this.config.url = this.shareUrl, // 扫码访问的链接地址;
				setTimeout(() => {
					this.drawCodeImage()
				},500)
			}
			this.isImgBtn = this.isWeiXinLogin();
		},
		methods:{
			closeShare() {
				this.$emit('close',false)
			},
			copyText(){
				if (this.copyUrl) {
					let val = this.copyUrl;
					let result
					let textarea = document.createElement("textarea")
					textarea.value = val
					textarea.readOnly = "readOnly"
					document.body.appendChild(textarea)
					textarea.select() // 选中文本内容
					textarea.setSelectionRange(0, val.length) 
					result = document.execCommand("copy") 
					textarea.remove()    
					uni.showToast({
						title:'复制成功',
						icon:'none'
					})
					return result
				} else {
					uni.showToast({
						title:'复制失败，请刷新页面',
						icon:'none'
					})
				}
			},
			drawCodeImage(){
				// uni.showLoading({
				// 	title:'生成中...'
				// })
				let qrCodeSrc = '';
				// if (this.$refs.imgCode && !this.$refs.imgCode.$el.src) {
				// 	return false;		
				// }
				if (!this.shareUrl) {
					// uni.hideLoading()
					return false;
				}
				// qrCodeSrc = this.$refs.imgCode.$el.src;
				qrCodeSrc = this.shareUrl;
				let ctx = uni.createCanvasContext('myCanvas')
				// let bgW = uni.upx2px(750)  // 750
				// let bgH = uni.upx2px(1100)   // 1100
				let bgW = uni.upx2px(510)  // 750
				let bgH = uni.upx2px(700)   // 1100
				// console.log('qrCodeSrc',qrCodeSrc)
				uni.getImageInfo({
					src:this.bgSrc,
					success:(r) => {
						// console.log(r)
						// ctx.drawImage(r.path,0,0,bgW/1.2,bgH/1.2)
						ctx.drawImage(r.path,0,0,bgW,bgH)
						uni.getImageInfo({
							src:qrCodeSrc,
							success:(res) => {
								// console.log('path:',res.path)
								let codeW = uni.upx2px(400)
								// let codeX = uni.upx2px(275)
								let codeX = uni.upx2px(55)
								let codeY = uni.upx2px(230)
								// ctx.drawImage(res.path,codeX/2.4,codeY/1.6,codeW,codeW)
								ctx.drawImage(res.path,codeX,codeY,codeW,codeW)
								ctx.draw(false,() => {
									uni.canvasToTempFilePath({
										canvasId: 'myCanvas',
										success: (re) => {
											// console.log(1111,re)
											this.qrCode = re.tempFilePath
											setTimeout(() => {
												// uni.hideLoading();
												this.qrCodeShow = true;
											},200)
										},
										fail: (err) => {
											// uni.hideLoading();
										}
									})
								}) 					
							},
							fail:() => {
								// uni.hideLoading();
								uni.showToast({ title: '生成失败',icon:'none',duration: 1500 })
							}
						})
					},
					fail:() => {
						// uni.hideLoading();
						uni.showToast({ title: '生成失败',icon:'none',duration: 1500 })
					}
				})
				
				// this.$refs.popup.open()
			},
			saveImg() {
				// var oA = document.createElement("a");
				// oA.download = "幻元鲸分享";// 设置下载的文件名，默认是’下载’
				// oA.href = this.qrCode;
				// document.body.appendChild(oA);
				// oA.click();
				// oA.remove(); // 下载之后把创建的元素删除
				// return false
				//上传图片
				//图片路径可自行修改
				uni.showLoading({
					mask:true
				})
				uploadImage(this.qrCode, '',
				    result => {
						console.log(result)
						uni.downloadFile({
						    url: result, //仅为示例，并非真实的资源
						    success: (res) => {
								console.log(res)
						        if (res.statusCode === 200) {
						            console.log('下载成功');
						        }
						    }
						});
						uni.hideLoading();
					},
					err => {
						// console.log(err)
						uni.hideLoading();
					}
				)

			},
			download(){  
				if (this.qrCode) {
					FileSaver.saveAs(this.qrCode, '幻元鲸分享二维码.jpg');
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.share-page{
		width: 100%;
		height: 100vh;
		// background-color: #16181D;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		position: fixed;
		z-index: 9;
		top:0;
		.share-main{
			width: 100%;
			height: 100%;
			padding: 0 120rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.share-main-box{
				width: 100%;
				.share-img{
					// width: 100%;
					width:510rpx;
					height: 700rpx;
					margin: 0 auto;
					position: relative;
					border-radius: 40rpx;
					overflow: hidden;
					._img{
						width: 510rpx;
						height: 700rpx;
						border-radius: 40rpx;
					}
					._qr{
						width: 360rpx;
						height: 360rpx;
						border-radius: 20rpx;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin:auto;
						margin-top: 240rpx;
						background-color: #323233;
					}
				}
			}
			.share-save{
				width: 406rpx;
				height: 88rpx;
				background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
				border-radius: 45rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin: 74rpx auto 0;
			}
			.share-copy{
				width: 406rpx;
				height: 88rpx;
				background: linear-gradient(228deg, #F0B04D 0%, #F28348 100%);
				border-radius: 45rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin: 32rpx auto 0;
			}
		}
	}
</style>
